<template>
  <div>
    <el-row class="panel-group" :gutter="40">
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel" @click="handleOpenPostList('today_posts')">
          <div class="card-panel-icon-wrapper icon-document">
            <svg-icon icon-class="posts" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">我待发贴</div>
            <count-to class="card-panel-num" :start-val="0" :end-val="data.unfinished" :duration="2600" />
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel" @click="handleOpenPostList('messages')">
          <div class="card-panel-icon-wrapper icon-message">
            <svg-icon icon-class="post_send" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">我已发贴</div>
            <count-to class="card-panel-num" :start-val="0" :end-val="data.finished" :duration="3000" />
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel" @click="handleOpenPostList('purchases')">
          <div class="card-panel-icon-wrapper icon-money">
            <svg-icon icon-class="posts" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">我总贴数</div>
            <count-to class="card-panel-num" :start-val="0" :end-val="data.total" :duration="3200" />
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel" @click="handleOpenPostList('shoppings')">
          <div class="card-panel-icon-wrapper icon-shoppingCard">
            <svg-icon icon-class="posts" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">全公司</div>
            <count-to class="card-panel-num" :start-val="0" :end-val="data.project_total" :duration="3600" />
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row v-if="data.owner_unfinished" class="panel-group" :gutter="40">
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <el-card class="box-card-component" style="margin-left:8px;">
          <div slot="header" class="box-card-header">
            <h2>同事可发帖数量:</h2>
          </div>
          <div style="position:relative;">
            <div v-for="(item,index) in data.owner_unfinished" :key="index" style="display: flex; justify-content: space-between; align-items: center; padding-top: 5px;" class="progress-item">
              <span>{{ item.owner }}</span>
              <count-to class="card-panel-num" :start-val="0" :end-val="item.count" :duration="3600" style="font-size: large; color: red;" />
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row v-if="data.projects_pending_topics && data.projects_pending_topics.length > 0" class="panel-group" :gutter="40">
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <el-card class="box-card-component" style="margin-left:8px;">
          <div slot="header" class="box-card-header">
            <h2>公司待审标题数:</h2>
          </div>
          <div style="position:relative;">
            <div v-for="(item,index) in data.projects_pending_topics" :key="index" style="display: flex; justify-content: space-between; align-items: center; padding-top: 5px;" class="progress-item">
              <span>{{ item.project_name }}</span>
              <count-to class="card-panel-num" :start-val="0" :end-val="item.pending_count" :duration="3600" style="font-size: large; color: orange;" />
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 最近发帖列表 -->
    <el-row v-if="recentPosts && recentPosts.length > 0" class="panel-group" :gutter="40">
      <el-col :span="24" class="card-panel-col">
        <el-card class="box-card-component" style="margin-left:8px;">
          <div slot="header" class="box-card-header">
            <h2>最近30天发帖 ({{ recentPostsTotal }}篇)</h2>
          </div>
          <div style="position:relative;">
            <div v-for="(siteGroup, siteIndex) in recentPosts" :key="siteIndex" class="site-group">
              <div class="site-header">
                <el-tag type="primary" size="small">{{ siteGroup.site_name }}</el-tag>
                <span class="post-count">({{ siteGroup.posts.length }}篇)</span>
              </div>
              <div class="posts-list">
                <div
                  v-for="(post, postIndex) in siteGroup.posts"
                  :key="postIndex"
                  class="post-item"
                >
                  <div class="post-content" @click="openPostUrl(post.url)">
                    <div class="post-title">{{ post.title }}</div>
                    <div class="post-meta">
                      <span class="post-date">{{ formatDate(post.publish_date) }}</span>
                      <el-tag v-if="post.status === 'published'" type="success" size="mini">已发布</el-tag>
                    </div>
                  </div>
                  <div class="post-actions">
                    <el-button
                      type="text"
                      size="mini"
                      class="google-search-btn"
                      title="在Google中搜索此标题"
                      @click.stop="searchOnGoogle(post.title)"
                    >
                      <i class="el-icon-search" />
                    </el-button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import CountTo from 'vue-count-to'
import { dashboard_posts, recent_posts } from '@/api/cms/post'
export default {
  components: {
    CountTo
  },
  data() {
    return {
      data: {
        total: 0,
        finished: 0,
        unfinished: 0,
        project_total: 0,
        owner_unfinished: [],
        projects_pending_topics: []
      },
      recentPosts: [],
      recentPostsTotal: 0
    }
  },
  mounted() {
    this.fetchData()
    this.fetchRecentPosts()
  },
  methods: {
    handleOpenPostList(type) {
      this.$router.push({ name: 'posts' })
    },
    fetchData() {
      dashboard_posts().then(response => {
        this.data = response.data
      })
    },
    fetchRecentPosts() {
      recent_posts().then(response => {
        this.recentPosts = response.data.site_groups || []
        this.recentPostsTotal = response.data.total || 0
      }).catch(error => {
        console.error('获取最近发帖列表失败:', error)
      })
    },
    formatDate(dateString) {
      if (!dateString) return ''
      const date = new Date(dateString)
      const now = new Date()
      const diffTime = Math.abs(now - date)
      const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24))

      if (diffDays === 1) {
        return '1天前'
      } else if (diffDays < 7) {
        return `${diffDays}天前`
      } else if (diffDays < 30) {
        const weeks = Math.floor(diffDays / 7)
        return `${weeks}周前`
      } else {
        return date.toLocaleDateString('zh-CN', {
          month: 'short',
          day: 'numeric'
        })
      }
    },
    openPostUrl(url) {
      if (url) {
        window.open(url, '_blank')
      } else {
        this.$message.warning('该帖子暂无发布链接')
      }
    },
    searchOnGoogle(title) {
      if (title) {
        const encodedTitle = encodeURIComponent(title)
        const googleUrl = `https://www.google.com/search?q=${encodedTitle}`
        window.open(googleUrl, '_blank')
      } else {
        this.$message.warning('标题为空，无法搜索')
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.panel-group {
  margin-top: 18px;
  .card-panel-col{
    margin-bottom: 32px;
  }
  .card-panel {
    height: 108px;
    cursor: pointer;
    font-size: 12px;
    position: relative;
    overflow: hidden;
    color: #666;
    background: #fff;
    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
    border-color: rgba(0, 0, 0, .05);
    &:hover {
      .card-panel-icon-wrapper {
        color: #fff;
      }
      .icon-people {
         background: #40c9c6;
      }
      .icon-message {
        background: #36a3f7;
      }
      .icon-money {
        background: #f4516c;
      }
      .icon-shoppingCard {
        background: #34bfa3
      }
    }
    .icon-people {
      color: #40c9c6;
    }
    .icon-message {
      color: #36a3f7;
    }
    .icon-money {
      color: #f4516c;
    }
    .icon-shoppingCard {
      color: #34bfa3
    }
    .card-panel-icon-wrapper {
      float: left;
      margin: 14px 0 0 14px;
      padding: 16px;
      transition: all 0.38s ease-out;
      border-radius: 6px;
    }
    .card-panel-icon {
      float: left;
      font-size: 48px;
    }
    .card-panel-description {
      float: right;
      font-weight: bold;
      margin: 26px;
      margin-left: 0px;
      .card-panel-text {
        line-height: 18px;
        color: rgba(0, 0, 0, 0.45);
        font-size: 16px;
        margin-bottom: 12px;
      }
      .card-panel-num {
        font-size: 20px;
      }
    }
  }
}

/* 最近发帖列表样式 */
.site-group {
  margin-bottom: 24px;

  .site-header {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #ebeef5;

    .post-count {
      margin-left: 8px;
      color: #909399;
      font-size: 12px;
    }
  }

  .posts-list {
    .post-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 16px;
      margin-bottom: 8px;
      background: #f8f9fa;
      border-radius: 6px;
      transition: all 0.3s;
      border-left: 3px solid transparent;

      &:hover {
        background: #e3f2fd;
        border-left-color: #409eff;
        transform: translateX(4px);
      }

      .post-content {
        flex: 1;
        cursor: pointer;

        .post-title {
          font-size: 14px;
          font-weight: 500;
          color: #303133;
          margin-bottom: 6px;
          line-height: 1.4;

          /* 限制标题长度，超出显示省略号 */
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .post-meta {
          display: flex;
          align-items: center;
          justify-content: space-between;

          .post-date {
            font-size: 12px;
            color: #909399;
          }
        }
      }

      .post-actions {
        margin-left: 12px;

        .google-search-btn {
          opacity: 0.6;
          visibility: visible;
          transition: all 0.3s;
          color: #909399;
          font-size: 16px;
          padding: 4px 8px;
          border: none;

          &:hover {
            opacity: 1;
            color: #409eff;
            background-color: rgba(64, 158, 255, 0.1);
          }

          .el-icon-search {
            font-size: 14px;
          }
        }
      }
    }
  }
}

.box-card-header {
  h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #303133;
  }
}
</style>
